<template>
	<div id="app">
		<div id="pie3">
			<div id="pie3"></div>
		</div>
	</div>
</template>
<script>
import { onMounted } from "vue";
import * as echarts from "echarts";

export default {
	// eslint-disable-next-line vue/multi-word-component-names
	name: "pie3",
	setup() {
		onMounted(() => {
			//需要获取到element,所以是onMounted的Hook
			let myChart = echarts.init(document.getElementById("pie3"));
			// 绘制图表
			myChart.setOption({

				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				// toolbox: {
				//   show: true,
				//   feature: {
				//     mark: { show: true },
				//     dataView: { show: true, readOnly: false },
				//     restore: { show: true },
				//     saveAsImage: { show: true }
				//   }
				// },
				series: [
					{
						name: "Radius Mode",
						type: "pie",
						radius: [15, 30],
						center: ["50%", "50%"],
						roseType: "radius",
						label: {
							show: false
						},
						emphasis: {
							label: {
								show: true
							}
						},
						data: [
							{ value: 50, name: "拣货" },
							{ value: 20, name: "配送" },
							{ value: 10, name: "签收" }
						]
					}
				]
			});
			// window.onresize = function () {
			// 	//自适应大小
			// 	myChart.resize();
			// };
		});
	},
	data() {
		return {
			view_name: "定数包"
		};
	},
	methods: {
		// getData() {
		// 	let _this = this;
		// 	this.$http
		// 		.get("ckFormDistView")
		// 		.then(res => {
		// 			console.log(res);
		// 			if (res.data.status == 0) {
		// 			} else {
		// 				_this.config.header = res.data.header;
		// 				_this.config.columnWidth = res.data.columnWidth;
		// 				_this.config.data = res.data.data;
		// 				_this.config = { ..._this.config };
		// 			}
		// 		})
		// 		.catch(err => {});
		// }
	},
	created() {
		// this.getData();
		// let _this = this;
		// setInterval(function () {
		// 	_this.getData();
		// }, 300000);
	}
};
</script>
<style>
bady {
	margin: 0;
}

#pie3 {
	width: 100px;
	height: 100px;
}

.table-name {
	font-size: 25px;
	color: rgb(236, 240, 245);
}
</style>